<template>
    <div id="mySpace">
        <div id="option">
            <div @click="getMyProfile">
                <router-link :to="{ path: '/mySpace', query: { msg: 1 } }">
                我的资料
                </router-link>
            </div>
            <router-link :to="{ path: '/mySpace', query: { msg: 2 } }">
              编辑资料
            </router-link>
            <div @click="getMyProducts">
                <router-link :to="{ path: '/mySpace', query: { msg: 3 } }">
                我的商品
                </router-link>
            </div>
            <div @click="getMyNeeds">
                <router-link :to="{ path: '/mySpace', query: { msg: 4 } }">
                我的需求
                </router-link>
            </div>
        </div>

        <div id="myProfile" v-if="this.$route.query.msg == 1">
            <div id="info">
                <img :src="myProfile.image" alt="">
                <div id="name">{{myProfile.username}}</div>
                <div id="sig">
                    <i class="el-icon-male" style="color: skyblue" v-if="myProfile.sex == 1"></i>
                    <i class="el-icon-female" style="color: pink" v-else></i>
                    <span>{{myProfile.signature}}</span>
                </div>
            </div>
            <div id="tradeinfo">
                <span>我的电话：{{myProfile.phone}}</span>
                <span>我的评分：{{myProfile.point}}</span>
                <span>交易总数：{{myProfile.buyerNum}}</span>
            </div>
        </div>

        <!-- DEMO -->
        <!-- <div id="myProfile" v-if="this.$route.query.msg == 1">
            <div id="info">
                <img src="../assets/img/head.png" alt="">
                <div id="name">zj</div>
                <div id="sig">
                    <i class="el-icon-male" style="color: skyblue"></i>
                    <i class="el-icon-female" style="color: pink"></i>
                    <span>本来无一物，何处惹尘埃</span>
                </div>
            </div>
            <div id="tradeinfo">
                <span>我的电话：12345678890</span>
                <span>我的评分：9.82</span>
                <span>交易总数：12</span>
            </div>
        </div> -->

        <div id="editProfile" v-if="this.$route.query.msg == 2">
            <div id="editImage">修改头像：<input type="file" accept="image/*" @change="getFile($event)" id="img_file" required/></div>
            <div id="editPwd">修改密码：<input type="text" v-model="newPassword"/></div>
            <div id="editPhone">修改电话：<input type="text" v-model="newPhone"></div>
            <div id="editSex">
                性别：
                <input type="radio" name="sex" value="1" v-model="newSex"/>男
                <input type="radio" name="sex" value="0" v-model="newSex"/>女
            </div>
            <div id="editSig">
                个性签名：<textarea rows="3" cols="80" v-model="newSignature"></textarea>
            </div>
            <el-button @click="confirmEdit">确认修改</el-button>
        </div>

        <div id="myProducts" v-if="this.$route.query.msg == 3">
            <div class="title">
                <i class="el-icon-star-on"></i>
                <span>我的商品</span>
                <i class="el-icon-star-on"></i>
            </div>
            <div class="showpro">
                <div id="productBrief" v-for="item in myProducts" :key="item.index">
                    <img :src="item.image" alt="图片加载不出来了QAQ">
                    <span id="name">{{item.name}}</span>
                    <div id="moreinfo">
                        <span>￥{{item.price}}</span>
                        <el-button @click="deleteProduct(item.pid)">删除商品</el-button>
                    </div>
                </div>
                <!-- DEMO -->
                <!-- <div id="productBrief" v-for="item in 5" :key="item.index">
                    <img src="https://img13.360buyimg.com/jdcms/s300x300_jfs/t1/178661/28/3905/138182/609d39a7Eb1a7b045/c6f860d88ffe3ffd.jpg.webp" alt="">
                    <span id="name">百草味 冰雪蛋糕540g/箱
                网红饼干糕点点心整箱早餐手撕小面包麻薯夹心糯米糍</span>
                    <div id="moreinfo">
                        <span>￥99.9</span>
                        <el-button @click="deleteProduct(3)">删除商品</el-button>
                    </div>
                </div> -->
            
            </div>
        </div>

        <div id="myNeeds" v-if="this.$route.query.msg == 4">
            <div class="title">
                <i class="el-icon-star-on"></i>
                <span>我的需求</span>
                <i class="el-icon-star-on"></i>
            </div>
            <div id="need" v-for="item in myNeeds" :key="item.index">
                <div id="usr">
                    <img :src="item.image" alt="图片加载不出来了QAQ">
                    <div id="needusername">{{item.username}}</div>
                    <div id="time">{{item.time}}</div>
                </div>
                <div id="post">
                    {{item.description}}
                </div>
                <el-button @click="deleteNeed(item.nid)">删除需求</el-button>
            </div>
            <!-- DEMO -->
            <!-- <div id="need" v-for="item in 5" :key="item.index">
                <div id="usr">
                    <img src="../assets/img/head.png" alt="图片加载不出来了QAQ">
                    <div id="needusername">username</div>
                    <div id="time">2021-5-26</div>
                </div>
                <div id="post">
                    lalala, I want a ddl cleaner!
                </div>
                <el-button @click="deleteNeed(3)">删除需求</el-button>
            </div> -->
        </div>

        
    </div>
</template>

<script>
import {request} from '../network/request'
import productBrief from '../components/productBrief'
import need from '../components/need.vue'

export default {
    components: {
        productBrief, need
    },
    data(){
        return{
            myProfile: '',
            myNeeds: '',
            myProducts: '',
            newImage: '',
            newPassword: '',
            newSex: '',
            newSignature: '',
            newPhone: '',
        }
    },
    methods: {
        getFile(event){
          this.newImage = event.target.files[0],
          console.log(this.image)
        },
        confirmEdit(){
            let formdata = new FormData();
            formdata.append('newImage', this.newImage);
            formdata.append('newPassword', this.newPassword);
            formdata.append('newSex', this.newSex);
            formdata.append('newSignature', this.newSignature);
            formdata.append('newPhone', this.newPhone);
            for (var value of formdata.values()) {
                console.log(value);
            }
            const option = {
                method: 'post',
                headers: {
                    'Content-Type': 'multipart/form-data'
                },
                data: formdata, 
                url: '/mySpace'
            }
            request(option).then(res => {
                console.log(res)
                if(res.data.res == 1){
                    this.$message({
                    message: "恭喜你，修改信息成功！",
                    type: "success"
                    });
                }else{
                this.$message.error("修改失败了~请检查修改信息是否合法");
                return
                }
            }).catch(err => {
                this.$message.error("修改失败了~请检查网络并再次尝试");
                return;
            });
        },
        getMyProducts(){
            request({
                url: '/mySpace',
                method: 'get',
                params: {
                    type: 3,
                    pid: ''
                }
            }).then(res => {
                this.myProducts = res.data.products
            })
        },
         getMyNeeds(){
            request({
                url: '/mySpace',
                method: 'get',
                params: {
                    type: 4,
                    nid: ''
                }
            }).then(res => {
                console.log(res)
                this.myNeeds = res.data.needs
            })
        },
        deleteProduct(id) {
            console.log(id)
            request({
                url: '/mySpace',
                method: 'get',
                params: {
                    type: 3,
                    pid: id
                }
            }).then(res => {
                this.myProducts = res.data.products
            })
        },
        deleteNeed(id){
            console.log(id)
            request({
                url: '/mySpace',
                method: 'get',
                params: {
                    type: 4,
                    nid: id
                }
            }).then(res => {
                this.myNeeds = res.data.needs
            })
        },
        getMyProfile(){
            request({
                url: '/mySpace',
                method: 'get',
                params: {
                    type: 1
                }
            }).then(res => {
                this.myProfile = res.data
                console.log(res)
            })
        }
    },
    created(){
        request({
            url: '/mySpace',
            method: 'get',
            params: {
                type: 1
            }
        }).then(res => {
            this.myProfile = res.data
            console.log(res)
        })
    }
}
</script>

<style scoped>

#mySpace {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-color: #fff;
}

#option {
    background-color: rgb(232, 232, 232);
    margin: 20px;
    display: flex;
    justify-content: space-around;
    height: 50px;
    line-height: 50px;
}

#myProfile {
    display: flex;
    justify-content: space-around;
    height: 270px;
    background-color: #fff;
}

#info, #tradeinfo {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
}

#myProfile img{
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 1px solid #ebebeb;
    overflow: hidden;
}

#tradeinfo {
    font-weight: bold;
}

#info img{
    margin: 0 auto;
}

#info div {
    text-align: center;
}

.title {
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    padding-top: 25px;
    padding-bottom: 20px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    width: 200px;
}

.title i {
    padding: 5px;
}

.showpro {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

#editProfile {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 500px;
    background-color: #fff;
    padding: 20px;
}

#editProfile .el-button{
    margin-left: 900px;
    width: 100px;
}

#editSex input{
    margin-left: 30px;
}

#editSig {
    display: flex;
    align-items: flex-start;
}

#editPwd input, #editPhone input {
    outline: none;
    font-size: 14px;
    padding: 2px;
}

textarea{
    outline: none;
    font-size: 16px;
    padding: 5px;
    font-family: 'Microsoft Yahei';
}

#productBrief {
    width: 200px;
    height: 340px;
    font-size: 14px;
    background-color: #fff;
    margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 10px;
}

#productBrief, #moreinfo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#name, #moreinfo {
    padding: 10px;
}

#name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    padding-bottom: 0px;
}

#sellername {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

#need {
    border: 1px solid rgb(204,204,204);
    border-bottom: 2px solid rgb(204,204,204);
    height: 180px;
    width: 900px;
    display: flex;
    flex-direction: column;
    padding: 10px;
    justify-content: space-between;
    margin: 20px auto;
    background-color: #fff;
}

#usr {
    display: flex;
    justify-content: flex-start;
}

#needusername, #time {
    line-height: 24px;
    margin-left: 20px;
}

#time {
    color: #ccc;
    font-size: 12px;
    line-height: 27px;
}

#post {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}

#need img{
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #ebebeb;
    overflow: hidden;
}

#need .el-button {
    margin-left: 750px;
}

.el-button {
  background-color: rgb(255,0,54);
  color: #fff;
}

</style>